import React from 'react';
import './index.css'
import { connect } from 'react-redux'
import { rank } from '../../store/rank.redux'

@connect(
  (state) => ({
    data: state.rank.data
  }),
  {
    rank
  }
)
class Rank extends React.Component {
  constructor(props) {
    super(props);
    this.state={}
  }
  componentDidMount() {
    this.props.rank();
  }
  render() {
    return (
      <div className="rank">
        <ul>
          {
            this.props.data.map(value => (
              <a key={value.id} href={`/songList/${value.id}`}>
                <li>
                  <p className="ph_img">
                    <img src={value.picUrl} alt="" />
                    <span className="iconfont icon-erji">{value.listenCount>10000?Math.floor(value.listenCount/10000)+'万':value.listenCount}</span>
                  </p>
                  <div className="ph_song_list">
                    <span className="iconfont icon-you"></span>
                    <h2>{value.title}</h2>
                    {
                      value.songList.map(song => (
                        <p key={song.number}>
                          {song.number}
                          <span>{song.songName}</span> -{song.singerName}
                        </p>
                      ))
                    }
                  </div>
                </li>
              </a>
            ))
          }
        </ul>
      </div>
    )
  }
}
export default Rank;